{% extends 'base_product.html' %}

{% block body %}
    <div class="px-4 pt-5 my-5 text-center border-bottom container">
        <h2>和电脑玩猜数字小游戏🎮</h2>
        <div class="p-4 p-md-5 border rounded-3 bg-light">
            <br>
            <p><b>可以猜一下我现在心里想的是哪个数字:</b></p>
            <div>
                <input type="text" class="form-control" id="number" name="可以猜一下我现在心里想的是哪个数字:"
                       width="60">
            </div>
            <p>When you're ready, click this button:</p>
            <button type="button" id="guess" class="btn btn-lg btn-primary w-40 mx-0 mb-2">查看猜对了吗</button>
            <br>

            <button type="button" id="reset" class="btn btn-lg btn-primary w-40 mx-0 mb-2">重新开始游戏</button>
            <br>
            <p>已经猜的次数</p>
            <span id="count">0</span>
            <br>
            <p>结果:</p>
            <span id="result"></span>
            <script>
                //1.先把需要用到的元素获取到
                <!--选中reset的-->
                let resetButton = document.querySelector("#reset");
                let num = document.querySelector("#number");
                let guess = document.querySelector("#guess");
                let contSpan = document.querySelector("#count");
                let resultSpan = document.querySelector("#result");
                //生成一个随机的整数，要求范围是:1-100
                //Math.random:范围是【0,1),所以想要生成一个1-100之间的随机数，则Math.random()*100
                //然后再将这个向下取整:Math.floor(Math.random())===>【0,99】
                //然后再加1===》【1，100】
                let guessNumber = Math.floor(Math.random() * 100) + 1;
                //3.给guess 看看猜对没 这个按钮设置点击事件
                let guessCount = 0;       //这个表示猜的次数
                guess.onclick = function () {
                    //1).先更新猜的次数
                    guessCount += 1;
                    contSpan.innerHTML = guessCount;
                    //2).将输入框的内容取出来，和待猜的数字进行对比，以此来确定是猜高了还是猜低了
                    //3).在界面上可以显示出是猜高了还是猜低了
                    let userInput = parseInt(num.value);

                    if (guessCount <= 6) {
                        if (userInput == guessNumber) {
                            //猜对了
                            resultSpan.innerHTML = '恭喜你猜对啦！<br>' +
                                '哼，猜中了也没有奖励！';
                            resultSpan.style.color = 'red';

                        } else if (userInput > guessNumber) {
                            //猜高了
                            resultSpan.innerHTML = '猜高了';
                            resultSpan.style.color = 'blue';
                        } else {
                            //猜低了
                            resultSpan.innerHTML = '猜低了';
                            resultSpan.style.color = 'green';
                        }

                    } else {
                        //超过6次之后
                        guessCount = guessCount - 1
                        resultSpan.innerHTML = '游戏结束，不玩啦';
                    }
                }
                //4.针对 重新开启游戏 设置一个点击事件
                reset.onclick = function () {
                    //实现删除所有已存在的信息
                    //这是第一种方法
                    // //1).重新生成随机数
                    // let guessNumber=Math.floor(Math.random()*100)+1;
                    // //2).将已经猜的次数清零
                    // guessCount=0;
                    // contSpan.innerHTML=guessCount;
                    // //3).清空结果
                    // resultSpan.innerHTML='';
                    // //4).清空输入框
                    // num.value='';

                    //第二种方法
                    //location和document类似，是浏览器提供的全局变量
                    //document控制的是:页面结构
                    //location控制的是:浏览器跳转
                    location.reload();
                }
            </script>
        </div>
    </div>
{% endblock %}